<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<% String path = request.getContextPath();%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>等你回家</title>
    <!-- Favicon -->
    <link href="<%=path %>/web/index/css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="icon" href="<%=path%>/web/static/images/favicon.png" type="image/png" sizes="32x32">
    <link href="<%=path%>/web/index/css/inc.css" rel="stylesheet" type="text/css" media="all" />

    <!-- All CSS -->
    <link rel="stylesheet" href="<%=path%>/web/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=path%>/web/static/css/aos.min.css">
    <link rel="stylesheet" href="<%=path%>/web/static/css/fontawesome-all.min.css">
    <link rel="stylesheet" href="<%=path%>/web/static/css/style.css">
    <!-- Google font -->
</head>

<body>
<!--header-start -->
<div class="banner-in1">
    <%--<div class="container1">
        <c:if test="${param.lostTypeId eq 3}">
            <h6>寻亲登记 / <span>流浪乞讨</span></h6>
        </c:if>
        <c:if test="${param.lostTypeId eq 4}">
            <h6>寻亲登记 / <span>其他寻家</span></h6>
        </c:if>
        <c:if test="${param.lostTypeId eq 5}">
            <h6>寻亲登记 / <span>游子归家</span></h6>
        </c:if>
    </div>--%>
</div>
<!--header-->
<div class="header1">
    <div class="container1">
        <div class="logo1">
            <a href="index.html"><img src="<%=path %>/web/index/images/logo.png" alt=" " /></a>
        </div>
        <div class="top-nav1">
            <span class="menu1"> </span>
            <ul>
                <li><a href="<%=path%>/web/index" class="scroll">首页 </a></li>
                <li ><a href="<%=path%>/web/information/chooseType" class="scroll">你在哪儿</a></li>
                <li><a href="<%=path %>/web/information/informationList?lostTypeId=0" class="scroll">我想回家</a></li>
                <li><a href="<%=path %>/web/blogger/blog" class="scroll">日志论坛</a></li>
                <c:if test="${empty(sessionScope.userinfo)}" var="result">
                    <li><a href="<%=path %>/web/userinfo/register" class="scroll">注册</a>|<a href="<%=path %>/web/userinfo/login" class="scroll">登录</a></li>
                </c:if>
                <c:if test="${not result}">
                    <li class="active1"><a href="<%=path%>/web/userinfo/applyVolunteer" class="scroll">加入我们</a></li>
                    <c:if test="${(sessionScope.userinfo.username eq '')||(sessionScope.userinfo.username eq NULL)}" var="result">
                        <span style="color:white">欢迎<a style="color: white" href="">${sessionScope.userinfo.phone}</a></span>
                    </c:if>
                    <c:if test="${not result}">
                        <span style="color:white">欢迎<a style="color: white" href="">${sessionScope.userinfo.username}</a></span>
                    </c:if>
                    <span style="color: white">|</span>

                    <span style="color:white"><a style="color: white" href="<%=path %>/web/userinfo/logout">注销</a></span>
                    <span style="color: white">|</span>
                    <label><img style="width:30px;height: 30px" src="<%=path %>/web/uploadImages/${sessionScope.userinfo.pic}"></label>
                </c:if>
            </ul>

        </div>
        <div class="clearfix1"> </div>
    </div>
</div>



<main class="main-content-area clearfix">
    <div class="post-job-area pb-100 pt-100">
        <div class="container">
            <div class="row">
                <div class="col-md-12">

                    <div class=" post-form form-bg">
                        <div class="info-title mb-3">
                            <h3>申请成为志愿者</h3>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <form id="form" action="<%=path%>/web/userinfo/applyVolunteer" method="post" >
                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label>&nbsp;输入昵称:</label>
                                            <input type="text" name="username" class="#" id="username" value="">
                                            <input type="hidden" name="id" value="${sessionScope.userinfo.id}"/>
                                            <input type="hidden" name="volunteerApply" value="1"/>
                                            <input type="hidden" name="volunteer" value="0">
                                            <span id="usernames"></span>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label>&nbsp;真实姓名:</label>
                                            <input type="text" id="name" name="name">
                                            <span style="color:red;" id="names"></span>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label>&nbsp;身份证号:</label>
                                            <input type="text" id="idCard" name="idCard">
                                            <span style="color:red;" id="idCards"></span>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label>&nbsp;输入邮箱:</label>
                                            <input type="text" id="email" name="email">
                                            <span style="color:red;" id="emails"></span>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label >&nbsp;输入地址:</label>
                                            <input type="text" id="address" name="address"/>
                                            <span id="addresss"></span>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label>&nbsp;&nbsp;输入QQ:</label>
                                            <input type="text" id="qq" name="qq">
                                            <span style="color:red;" id="qqs"></span>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label>&nbsp;输入微信:</label>
                                            <input type="text" id="wechat" name="wechat">
                                            <span style="color:red;" id="wechats"></span>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label>&nbsp;出生日期:</label>
                                            <input type="date" id="birthday" name="birthday">
                                            <span style="color:red;" id="birthdays"></span>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label>&nbsp;&nbsp;选择性别:</label>
                                            <INPUT checked name="sex" type="radio" value="男"/>男
                                            <INPUT name="sex" type="radio" value="女"/>女
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label style="float: left;">&nbsp;&nbsp;选择职业:</label>
                                            <select name="professionId" class="form-control custom-select" style="width:150px;float: left;margin-left: 10px; " >
                                                <c:forEach items="${requestScope.professions}" var="professions" >
                                                    <option value="${professions.id}">${professions.title}</option>
                                                </c:forEach>
                                            </select>
                                        </div>
                                    </div>


                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label style="float: left; ">&nbsp;上传身份证正面照:</label>
                                            <%--<input style="float: left;padding-left: 5px;" type="file" id="idCardPic" name="idCardPic"/>--%>
                                            <iframe style="height: 150px;border:0" src="${pageContext.request.contextPath}/web/upload/uploadPositive" ></iframe>
                                            <input type="hidden" name="idCardPic" id="idCardPic"/>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label style="float: left; ">&nbsp;上传身份证背面照:</label>
                                           <iframe style="height: 150px;border:0" src="${pageContext.request.contextPath}/web/upload/uploadContrary"></iframe>
                                            <input type="hidden" name="idCardVerso" id="idCardVerso"/>
                                        </div>
                                    </div>



                                    <div class="form-row">
                                        <div  class="form-group col-md-12">
                                            <label style="float: left;">&nbsp;&nbsp;所在地:</label>
                                            <select id="province" class="form-control custom-select" style="width:150px;float: left;margin-left: 10px; " name="provinceId">
                                                <c:forEach items="${requestScope.provinces}" var="province">
                                                    <option value="${province.areaId}">${province.areaName}</option>
                                                </c:forEach>
                                            </select>
                                            <select id="city" name="cityId" class="form-control custom-select" style="width:150px; float: left;">
                                            </select>
                                            <select id="area" name="areaId" class="form-control custom-select" style="width:150px;float: left ">
                                            </select>
                                            <p style="float: left;"></p>
                                        </div>
                                    </div>
                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label>&nbsp;个性签名:</label>
                                            <textarea name="remark" class="form-control" id="remark" rows="3"></textarea>
                                            <span style="color:red;" id="remarks"></span>
                                        </div>
                                    </div>


                                    <div class="form-row">
                                        <div class="form-group col-md-12">
                                            <label >&nbsp;介绍(填写一下为什么想做志愿者)</label>
                                            <textarea name="info" class="form-control" id="info" rows="3"></textarea>
                                            <span id="infos"></span>
                                        </div>
                                    </div>
                                    <button type="submit" class="btn btn-primary job-post-btn btn-lg btn-block ">发布</button>
                                </form>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<!--footer-area-start -->
<footer>
    <div class="footer" style="height: 230px;">
        <div class="container" style="margin-top: -40px;">
            <p style="font-size: 15px;"><span style="font-size: 20px;">等你回家</span><span >邮箱:1111111@163.com</span> 电话:0532—85025005</p>
            <p class="footer-class" style="font-size:15px;margin-top: -75px;">地址:山东省青岛市市南区中联创意广场B1栋三楼 <a href="http://w3layouts.com/" target="_blank">万码学堂</a></p>
            <p class="footer-class" style="font-size:15px;margin-top: -60px;text-transform: none;">Copyright © 2019 www.dengnihuijia.com All rights Reserved.</p>
        </div>
    </div>
</footer>
<script src="<%=path%>/web/static/js/modules/jquery-3.4.1.min.js"></script>
</body>
</html>
<script type="text/javascript">
    $(function () {
        var usernamep=false;
        var namep=false;
        var idCardp=false;
        var emailp=false;
        var qqp=false;
        var birthdayp=false;
        var addressp=false;
        var infop=false;
        var wechatp=false;
        /*



        */

        $("#wechat").blur(function(){//微信失去焦点
            check_wechat();

        });


        $("#username").blur(function () {//昵称失去焦点判断
            check_username();
        });
        $("#name").blur(function () {//真实失去焦点事件
            check_name();
        });
        $("#idCard").blur(function () {//身份证失去焦点事件
            check_idCard();
        });
        $("#email").blur(function () {//邮箱失去焦点事件
            check_email();
        });
        $("#qq").blur(function () {//QQ失去焦点事件
            check_qq();
        });
        $("#birthday").blur(function () {//生日失去焦点事件
            check_birthday();
        });
        $("#address").blur(function () {//家庭住址失去焦点事件
            check_address();
        });

        $("#info").blur(function () {//介绍失去焦点事件
            check_info();
        })

        function check_wechat() {//昵称
            var wechat=$("#wechat").val();
            var zz=/^[a-zA-Z][a-zA-Z0-9_-]{5,19}$/;//只能6—20个字母、数字、下划线和减号，必须以字母开头（不区分大小写），不支持设置中文
            var flag=zz.test(wechat);
            if(flag)
            {
                wechatp=true;
                $("#wechats").html("");
                $("#wechats").css("color","green");
            }
            else{
                wechatp=false;
                $("#wechats").html("（只能6—20个字母、数字、下划线和减号，必须以字母开头（不区分大小写））");
                $("#wechats").css("color","red");
            }
        }



        function check_username() {//昵称
            var username=$("#username").val();
            var zz=/^[\u4E00-\u9FA5]{1,6}$/;
            var flag=zz.test(username);
            if(flag)
            {
                usernamep=true;
                $("#usernames").html("");
                $("#usernames").css("color","green");
            }
            else{
                usernamep=false;
                $("#usernames").html("（请输入1-6位中文名称）");
                $("#usernames").css("color","red");
            }
        }
        function check_name() {//真实姓名失去焦点事件
            var name = $("#name").val();
            var zz=/^[\u4E00-\u9FA5]{1,20}$/;
            var flag=zz.test(name);
            if (flag) {
                namep = true;
                $("#names").html("");
            }
            else {
                namep = false;
                $("#names").html("(姓名格式输入错误,请重新输入。)");
                $("#names").css("color","red");

            }

        }
        function check_idCard() {//身份证判断
            var idCard = $("#idCard").val();
            var zz=/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
            var flag=zz.test(idCard);
            if (flag) {
                $("#idCards").html("");
                idCardp = true;
            }
            else{
                $("#idCards").html("(身份证格式错误,请重新输入)");
                $("#idCards").css("color","red");
                idCardp = false;
            }
        }
        function check_email() {//邮箱验证
            var email = $("#email").val();
            var zz=/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
            var flag=zz.test(email);
            if (flag){
                $("#emails").html("");
                emailp = true;
            }
            else{
                $("#emails").html("(邮箱格式错误请重新输入)");
                $("#emails").css("color","red");

                emailp= false;
            }
        }
        function check_qq() {//QQ消失焦点事件
            var qq = $("#qq").val();
            var zz= /^\d{5,10}$/;
            var flag=zz.test(qq);

            if (flag) {
                $("#qqs").html("");
                qqp = true;
            }
            else{
                $("#qqs").html("(QQ号格式输入错误请重新输入)");
                $("#qqs").css("color","red");
                qqp = false;
            }
        }
        function check_birthday() {//生日失去焦点事件
            var birthday=$("#birthday").val();
            if(birthday=="")
            {
                $("#birthdays").html("(生日不能为空)");
                $("#birthdays").css("color","red");
                birthdayp=false;
            }
            else{
                $("#birthdays").html("");
                birthdayp=true;
            }

        }
        function check_address() {//家庭地址失去焦点事件
            var address=$("#address").val();
            if(address=="")
            {
                $("#addresss").html("(具体地址不能为空)");
                $("#addresss").css("color","red");
                addressp=false;
            }
            else{
                $("#addresss").html("");
                addressp=true;
            }
        }
        function check_info() {//介绍失去焦点事件
            var info=$("#info").val();
            if(info=="")
            {
                $("#infos").html("(备注不能为空)");
                $("#infos").css("color","red");
                infop=false;
            }
            else{
                $("#infos").html("");
                infop=true;
            }


        }
        /*
        var usernamep=false

        var namep=false
        var idCardp=false
        var emailp=false
        var qqp=false
        var birthdayp=false
        var addressp=false
        var infop=false
         */
        $("#form").submit(function () {
            check_username();
            check_name();
            check_idCard();
            check_email();
            check_qq();
            check_birthday();
            check_address();
            check_info();
            check_wechat();
            if (wechatp==true && usernamep==true&&namep==true&&idCardp==true&&emailp==true&&qqp==true&&birthdayp==true&&addressp==true&&infop==true){
                return true;
            } else {
                return false;
            }
        })

        initCities();
        $("#province").change(function(){
            initCities()
        })
        $("#city").change(function(){
            initAreas()
        })

    })
    function initCities(){
        var provinceId = $("#province").val();
        $("#city").empty();
        $("#area").empty();
        $.ajax({
            url: "${pageContext.request.contextPath}/web/information/cities",
            data: {"areaId": provinceId},
            type: "get",
            dataType: "json",
            success: function (cities){
                for (var i=0;i<cities.length;i++)
                {
                    $("#city").append("<option value=\""+cities[i].areaId+"\">"+ cities[i].areaName + "</option>");
                }
                $.getJSON("${pageContext.request.contextPath}/web/information/cities",{areaId:$("#city").val()}, function (cities) {
                    for(var i=0;i<cities.length;i++)
                    {
                        $("#area").append("<option value=\""+cities[i].areaId+"\">"+cities[i].areaName+"</option>")
                    }
                });
            }
        });

    }
    function initAreas() {
        var areaId = $("#city").val();
        $("#area").empty();
        $.ajax({
            url:"${pageContext.request.contextPath}/web/information/cities",
            data:{"areaId":areaId},type:"get",dateType:"json",
            success:function (mes) {
                for (var i = 0; i < mes.length; i++) {
                    $("#area").append("<option value=\"" + mes[i].areaId + "\">" + mes[i].areaName + "</option>")
                }
            }
        })
    }

</script>

